import React, { useState, useMemo, useEffect } from 'react';
import styles from './index.less';
import PublicList from '../PublicList';
import { Tabs, DatePicker } from 'antd-mobile';
import { connect, history } from 'umi';
import { Input } from 'antd';
import { SearchOutlined, AudioOutlined } from '@ant-design/icons';
import moment from 'moment';

let Header = ({ params, changeparams }) => {
  return (
    <div style={{ width: '100%', padding: '10px 12px' }}>
      <DatePicker
        mode="date"
        value={params ? params : undefined}
        onChange={(val) => {
          changeparams(val);
        }}
      >
        <div style={{ padding: 12, backgroundColor: '#fff', borderRadius: 6 }}>
          <span style={{ fontSize: 16 }}>
            {params
              ? `筛选日期 : ${moment(params).format('YYYY-MM-DD')}`
              : '选择日期'}
          </span>
        </div>
      </DatePicker>
    </div>
  );
};

let TabList = (props) => {
  let {
    dispatch,
    global: { curtype, userinfo },
    status,
    location,
  } = props;
  const deftabs = [
    {
      title: 'RFID标签管理',
      key: 'rfid',
      path: '/vehicle-api/wechat/monitor/rfid_list',
    },
    {
      title: '电器指纹管理',
      key: 'electrical',
      path: '/vehicle-api/wechat/monitor/finger_print_list',
    },
    {
      title: '电梯识别管理',
      key: 'elevator',
      path: '/vehicle-api/wechat/monitor/lift_list',
    },
    {
      title: '集充消防管理',
      key: 'charge',
      path: '/vehicle-api/wechat/monitor/fire_control_list',
    },
  ];

  const [cur, setcur] = useState({
    title: 'RFID标签管理',
    key: 'rfid',
    path: '/vehicle-api/wechat/monitor/rfid_list',
  });

  let tabs = useMemo(() => {
    if (!userinfo?.menus) return [];
    let menus =
      userinfo?.menus
        .filter((it) => it.menu_type == 'wechat')
        .map((it) => it.menu_key) ?? [];
    return deftabs.filter((it) => menus.indexOf(it.key) != -1);
  }, [userinfo?.menus]);

  useEffect(() => {
    let { query } = location ?? {};
    if (query && query?.key) {
      let cur = deftabs.filter((it) => it.key == query?.key)[0] ?? {};
      setcur(cur);
    }
  }, [location]);

  return (
    <Tabs
      tabs={tabs}
      distanceToChangeTab={0.5}
      tabBarBackgroundColor={'transparent'}
      tabBarActiveTextColor={'#fff'}
      tabBarInactiveTextColor={'rgba(255,255,255,0.5)'}
      onChange={(tab, i) => {
        setcur(tab);
        dispatch({
          type: 'global/curtype',
          payload: tab.key,
        });
      }}
      tabBarTextStyle={{ fontSize: 16 }}
      tabBarUnderlineStyle={{ borderColor: '#fff', borderWidth: 1 }}
      animated
      renderTabBar={(props) => (
        <Tabs.DefaultTabBar
          {...props}
          page={3}
          activeTab={tabs
            .map((it) => it.key)
            .findIndex((val) => {
              return val == cur.key;
            })}
        />
      )}
    >
      <PublicList Header={Header} status={status} path={cur.path}></PublicList>
    </Tabs>
  );
};

export default connect(({ global, loading }) => ({
  global,
  loading,
}))(TabList);
